<template>
    <div id="body">
        <div id="left" class="flex-column">
            <div id="header" class="flex-row-center"><a href="/main">飞舟照片管理后台</a></div>
            <div id="menu" class="flex-column flex1 overflow-y">
                <div class="menuitembox" v-for="m in obj.menu" :key="m">
                    <span class="menuitem flex-row-center" :class="{'selected':m.childRoutes.includes(proxy.$route.path.split('/')[1])}" @click="toMenu(m)">{{m.label}}</span>
                </div>
            </div>
            <div id="bottom">
                <span class="loginout flex-row-center pointer" @click="logout"><a>退出</a></span>
            </div>
        </div>
        <div id="right">
            <div id="header" class="flex-row-center">
                <el-dropdown ref="dropdown1" trigger="contextmenu">
                    <span @click="showtab" class="flex-row-center pointer weight">
                        <div class="username flex-row-center pr10">
                            <img class="userhead" src="../assets/icon/user.png"/>
                            <span style="margin-left: 45px;">{{ obj.u.name||'未知用户' }}</span>
                            <ArrowDownBold style="width: 12px;margin-left:2px;" />
                        </div>

                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="obj.editpass.show = true">修改密码</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
            <div id="submenu" v-if="obj.submenu.length > 0">
                <a @click="toPage(sm)" :class="{'selected':`/${sm.component}`==proxy.$route.path}" v-for="sm in obj.submenu" :key="sm">{{sm.label}}</a>
            </div>
            <div id="subbody" v-if="obj.submenu.length > 0">
                <router-view v-slot="{ Component }">
                    <keep-alive>
                        <component :is="Component" v-if="$route.meta.keepAlive" :key="$route.path" />
                    </keep-alive>
                    <component :is="Component" v-if="!$route.meta.keepAlive"/>
                </router-view>
            </div>
            <Dashboard v-else />
        </div>
    </div>
    <el-dialog v-model="obj.editpass.show" title="修改密码" width="450px" draggable center destroy-on-close>
        <editPass @close="obj.editpass.show = false" />
    </el-dialog>
</template>

<script setup>
    import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
    import { ArrowDownBold, } from '@element-plus/icons-vue'
    import { onBeforeRouteUpdate } from 'vue-router';
    import editPass from '@/pages/editpass.vue'
    import Dashboard from '@/pages/dashboard.vue'
    let { proxy } = getCurrentInstance()

    //存不住页面，就是这里的问题
    let cururl = proxy.$route.path.substring(1); //这个是当前路由proxy.$route，上面上路由列表router.currentRoute.value，两个不一样
    let obj = reactive({
        u: localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")):{},
        menu: [],
        submenu: [],
        editpass: { show: false },
        tabShow: false,
        nowlabel: ''
        
    });
    const dropdown1 = ref(null)
    onBeforeRouteUpdate((to, from, next) => {
        const cururl = to.path.substring(1)
        if(cururl == "main") {
            obj.menu = []
            obj.submenu = []
            init()
        }else{
            obj.menu.forEach(m => {
                m.showhid = !m.sub.some((v,i) => v.component == cururl) //返回bool，有一个满足即true
                if(!m.showhid){
                    let ms = m.sub.filter(e => e.show);
                    ms.forEach(e => e.selected = e.component == cururl)
                    obj.submenu = ms
                }
            })
            next()
        }
    });

    onMounted(()=>{
        init()
    })

    let init = () => {
        proxy.$ajax({
            url: 'manager/getMenu',
            data: {},
            bfLoading: true
        }).then(d => {
            let authority = d.msg.authority||[]
            authority.forEach(m => {
                m.childRoutes = []
                let subTmp=[]
                m.sub.forEach(t => {
                    m.childRoutes.push(`${t.component}`)
                    if(t.show && t.label){
                        subTmp.push(t)
                    }
                    t.sub.forEach(e => { //把子项提上来，它只需提三层即可
                        if(e.show && e.label){
                            e.component = t.component+'/'+e.component
                            subTmp.push(e)
                        }
                    })
                })
                m.sub = subTmp
                m.show = m.sub.some(t => t.label) //这是用来判断，子项若没有，本项不显示
                m.showhid = !m.sub.some((v,i) => v.component == cururl) //返回bool，有一个满足即true
                if(!m.showhid){
                    let ms = m.sub.filter(e => e.show);
                    ms.forEach(e => e.selected = e.component == cururl)
                    obj.submenu = ms
                }
            })
            obj.menu = authority.filter(t => t.show)
            console.log('obj.menu',obj.menu)
        }).catch( )
        
        setUrlConfig()
    }

    const setUrlConfig=()=>{
        let i = obj.menu.findIndex(e => proxy.$route.path==`/${e.sub[0].component}`)
        if(i>-1){
            toMenu(obj.menu[i],i)
        }else{
            obj.menu.map(e => {
                e.showhid= !(e.sub.find(ev=>{
                    if(ev.childs.includes(proxy.$route.path)){
                        obj.submenu = e.sub.filter(ev => ev.show)
                        ev.selected = true
                        return true
                    }
                }))
            })
        }
    }

    let logout = () => {
        sessionStorage.clear()
        proxy.routerPushMixin("/")
    }
    let toMenu = (m,i) => {
        obj.nowlabel = m.label||''
        obj.submenu = m.sub.filter(e => e.show)
        proxy.routerPushMixin("/" + m.sub[0].component)
        obj.menu.forEach((t,n) => t.showhid = n!=i)
    }
    let toPage = e => {
        console.log('1',`/${e.component}`);
        proxy.routerPushMixin(`/${e.component}`)
    }

    const showtab=()=>{
        if (!dropdown1.value) return
        dropdown1.value.handleOpen()
    }
</script>

<style scoped lang="scss">
    #body { display: flex; overflow: hidden; height: 100%; background-color: $white-color;
        #left{
            width: 200px;height: 100%;
            #header{
                width: 200px;height: 60px;border-bottom: 1px solid #f5f5f5;box-sizing: border-box;
                padding: 0 10px;font-size: 20px;font-weight: bold;
                a{text-decoration: none;color: #000;}
            }
            #menu{
                border-right: 1px solid #f5f5f5;box-sizing: border-box;overflow: hidden;
                .menuitembox{
                    width: 200px;height: 60px;padding: 10px;box-sizing: border-box;
                }
                .menuitem{
                    width: 100%; height: 100%; padding: 10px; box-sizing: border-box; border-radius: 5px; font-size: 14px;font-weight: bold;cursor: pointer;
                }
                .menuitem:hover{background: #f5f5f5; color: $themecolor;}
                .selected{background: $themecolor-mini !important; color: $themecolor;}
            }
            #bottom{
                width: 200px;height: 60px;padding: 10px;box-sizing: border-box;border-right: 1px solid #f5f5f5;box-sizing: border-box;
                .loginout{width: 100%; height: 100%; padding: 10px; box-sizing: border-box; border-radius: 5px;font-size: 14px;}
                .loginout:hover{background: $themecolor-mini;color: $themecolor;}
            }
        }
        #right {
            display: flex; flex: 1; flex-direction: column; overflow: hidden; background-color: $white-color;
            #header {
                color: $start-color; font-size: 14px; min-height: 60px; max-height: 60px; display: flex; justify-content: flex-end; align-items: center; border-bottom: 1px solid #f5f5f5; padding: 10px; box-sizing: border-box;
                .metatitle{font-size: 20px; font-weight: bold; color: #000;}
                span { padding-left: 5px; }
                .username{
                    position: relative;
                    min-width: 125px;
                    height: 30px;
                    background: #F4F4FA;
                    border-radius: 19px 19px 19px 19px;
                    .userhead{position: absolute; left: 0; top: 50%; margin-top: -20px; width: 40px;height:40px;}
                }
            }
            #submenu {
                z-index: 2; font-size: 14px; height: 50px; box-sizing: border-box; box-shadow: 0 10px 20px rgba(darken($line-color, 0%), 0.4); display: flex; align-items: flex-end; 
                a { cursor: pointer; color: #333; padding: 0 25px 10px 25px; position: relative; }
                a.selected { opacity: 1; color: $end-color; font-weight: bold; }
                a.selected:after { content: ""; height: 2px; background-color: lighten($start-color, 30%); position: absolute; bottom: 0; left: 0; right: 0; box-shadow: 0 5px 10px rgba($start-color, 1); }
            }
            #subbody { flex: 1;box-sizing: border-box; overflow: hidden; position: relative; padding: 10px; box-sizing: border-box; background: #f5f5f5; }
        }
    }
</style>